<template>
    <div>
<table>
    <thead>
        <tr>
            <td>
                <input type="checkbox" name="" id="" @click="all" v-model="type">
            </td>
            <td>房号</td>
            <td>图片</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
    </thead>
<tbody>
    <tr v-for="a in list">
        <td>
                <input type="checkbox" name="" id="" :value="a.id"  v-model="ids">
            </td>
            <td>{{a.name}}</td>
            <td><img :src="'https://localhost:7093/'+a.img" width="200px" height="100px">
            </td>
            <td>{{ a.state?"上架":"下架" }}</td>
            <td>
                <a :href="'https://localhost:7093/'+a.img">查看图片</a>
                <input type="button" v-if="!a.state" value="上架" @click="state(a.id,true)">
                <input type="button" v-else value="下架" @click="state(a.id,false)">
                <input type="button"  value="删除" @click="del(a.id)">
            </td>
        </tr>
</tbody>
</table>
<input type="button" value="首页" @click="fan(1)">
<input type="button" value="上一页" @click="fan(2)">
<input type="button" value="下一页" @click="fan(3)">
<input type="button" value="尾页" @click="fan(4)">
当前第{{date.pagenow  }}页  共{{count.pagecount  }}页   每页{{ date.pagehang }}行  共{{count.count  }}条数据


    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router=useRouter()

const del=(vid:any)=>{
    if(!confirm("确认删除吗")){
return;
    }
axios.delete('https://localhost:7093/api/Emp/DeleteRange',{params:{idstring:vid}}).then(res=>{
    if(res.data>0){
alert('成功')
show()
    }else{
        alert('失败')
    }
})
}
const ids=ref([0])
const type=ref(false)
const all=()=>{
if(!type.value){
for (let index = 0; index < list.value.length; index++) {
    ids.value.push(list.value[index].id)
    
}

}else{
ids.value=[0]

}


}


const state=(vid:any,state:any)=>{


axios.get('https://localhost:7093/api/Emp/State',{params:{id:vid,state:states}}).then(res=>{
 if(res.data>0){
    alert('成功')
    show()
 }else{
    alert('失败')
 }

})
}
const states=ref({
    id:0,
    state:true
})
const fan=(a:any)=>{
if(a==1){
    date.value.pagenow=1
    show()
}
if(a==2){
    if(date.value.pagenow>1){
        date.value.pagenow-=1
        show()
    }
   
}
if(a==3){
    if(date.value.pagenow<count.value.pagecount){
        date.value.pagenow+=1
        show()
    }
   
}
if(a==4){
    date.value.pagenow=count.value.pagecount
    show()
}
}
onMounted(()=>{
    show()
})
const show=()=>{


axios.get('https://localhost:7093/api/Emp/GetAll',{params:date.value}).then(res=>{
   list.value=res.data.list
   count.value.count=res.data.count
   count.value.pagecount=Math.ceil(count.value.count/date.value.pagehang)

})
}
const count=ref({
   count:0,
   pagecount:0,
})
const date=ref({
   pagenow:1,
   pagehang:2,
})
const list=ref([{
   "id": 2,
      "name": "101",
      "img": "1",
      "state": false
}])
</script>

<style scoped>

</style>